<template>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
// import option from './option.js';
import generateOption from './option.js';
import * as echarts from 'echarts'

export default {
    data() { 
        return {
            chartInstance2: null,
            resizeObserver: null
        };
    },
    props: {
        volumeDetailData: {
            type: Array,
            required: true,
            default: () => [
                { name: "捕捞量(吨)", data: [1, 2, 3, 4, 5, 8] },
                { name: "运输量(吨)", data: [369, 350, 269, 460, 200, 213] },
            ]
        }
    },
    mounted() {
        if (this.$refs.chartContainer) {
            this.chartInstance2 = echarts.init(this.$refs.chartContainer, this.$echartsConfig.theme);
            this.updateChart();
            this.resizeObserver = new ResizeObserver(() => {
                this.chartInstance2 && this.chartInstance2.resize();
            });
            this.resizeObserver.observe(this.$refs.chartContainer);
        }
    },
    methods: {
        updateChart() {
            const option = generateOption(this.volumeDetailData);
            this.chartInstance2 && this.chartInstance2.setOption(option, true);
        }
    },
    watch: {
        volumeDetailData: {
            deep: true,
            handler() {
                this.updateChart();
            }
        }
    },
    beforeDestroy() {
        if (this.chartInstance2) {
            this.chartInstance2.dispose();
        }
        if (this.resizeObserver && this.$refs.chartContainer) {
            this.resizeObserver.unobserve(this.$refs.chartContainer);
            this.resizeObserver.disconnect();
        }
    }
};
</script>
